<template>
  <div>
    <el-dialog
      :title="formData.id ? '短信模板详情' : '新建短信模板'"
      v-model="isAdd"
      width="500px"
      @open="getConfigList"
      :before-close="cancelAdd"
    >
      <el-form
        :disabled="isDetail"
        :model="formData"
        :rules="rules"
        ref="formData"
        label-width="100px"
      >
        <el-form-item label="模板ID" prop="reachId">
          <el-input
            type="text"
            placeholder="请输入模板ID"
            v-model="formData.reachId"
            clearable
            @input="setValue('reachId')"
            maxlength="10"
            :show-word-limit="true"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="模板名称" prop="name">
          <el-input
            clearable
            type="text"
            placeholder="请输入模板名称"
            v-model="formData.name"
            maxlength="30"
            :show-word-limit="true"
          >
          </el-input>
        </el-form-item>

        <el-form-item label="短信消息类型" prop="smsType">
          <el-radio-group v-model="formData.smsType">
            <el-radio label="营销类">营销类</el-radio>
            <el-radio label="通知类">通知类</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="签名" prop="smsSign">
          <el-input
            type="text"
            placeholder="请输入签名"
            v-model="formData.smsSign"
            maxlength="20"
            :show-word-limit="true"
            clearable
          >
          </el-input>
        </el-form-item>

        <el-form-item label="模板内容" prop="content">
          <el-input
            type="textarea"
            placeholder="请输入模板内容"
            clearable
            v-model="formData.content"
          >
          </el-input>
        </el-form-item>

        <el-form-item>
          <div class="center-tip">
            <span class="circular"></span>
            <span>{{ tip }}</span>
          </div>
        </el-form-item>

        <el-form-item label="短信配置" prop="configId">
          <el-select
            v-model="formData.configId"
            placeholder="请选择配置"
          >
            <el-option
              v-for="ele in configList"
              :key="ele.id"
              :label="ele.name"
              :value="ele.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            type="textarea"
            placeholder="请输入备注"
            v-model="formData.remark"
            maxlength="50"
            :show-word-limit="true"
            clearable
          >
          </el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelAdd">取 消</el-button>
          <el-button v-show="!addData.id" type="primary" @click="formValidate"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import reachPipelineApi from "@/api/reachPipelineApi";
import sysConfigApi from "@/api/sysConfigApi";
export default {
  props: {
    isAdd: {
      require: false,
      type: Boolean,
      default: () => {
        return false;
      },
    },
    isDetail: {
      require: false,
      type: Boolean,
      default: () => {
        return false;
      },
    },
    addData: {
      require: false,
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  watch: {
    isAdd(val) {
      this.formData = this.addData;
    },
  },
  data() {
    return {
      tip:
        "模版变量部分用{{xxxx.DATA}}代替，例如：您好{{user.DATA}},亲爱的用户{{content.DATA}}.....",
      configList: [],
      externalType: "sms",
      formData: {
        name: "",
        reachId: "",
        smsType: "营销类",
        smsSign: "",
        content: "",
        remark: "",
        configId: ""
      },
      rules: {
        name: [{ required: true, message: "请输入模板名称", trigger: "blur" }],
        reachId: [{ required: true, message: "请输入模板ID", trigger: "blur" }],
        smsSign: [{ required: true, message: "请输签名", trigger: "blur" }],
        content: [{ required: true, message: "请输模板内容", trigger: "blur" }],
        configId: [{ required: true, message: "请选择配置", trigger: "blur" }],
      },
    };
  },

  methods: {
    formValidate() {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          this.addReach();
        } else {
          
          return false;
        }
      });
    },
    setValue(reachId) {
      this.formData[reachId] = this.formData[reachId].replace(/\D/g, "");
    },
  
    async getConfigList() {
      if(this.configList.length) {
        return
      }
      let rs = await sysConfigApi.getConfigList({externalType: this.externalType});
      
      if (rs.code == 200) {
        this.configList = rs.payload
      }
    },
    async addReach() {
      let rs = await reachPipelineApi.addReach(this.formData);
      if (rs.code == 200) {
        ElMessage.success("添加短信成功");
        this.confirmAdd();
      }
    },
    cancelAdd() {
      this.$refs.formData.resetFields();
      this.$emit("cancelAdd");
    },
    confirmAdd() {
      this.$refs.formData.resetFields();
      this.$emit("confirmAdd");
    },
  },
};
</script>

<style lang="scss" scoped>
.center-tip {
  position: relative;
  width: 454px;
  height: 43px;
  background: #f6faff;
  border-radius: 4px;
  line-height: 20px;
  font-size: 13px;
  font-weight: 400;
  color: #909399;
  padding: 8px 7px 8px 24px;
  font-family: PingFangSC-Regular, PingFang SC;
  .circular {
    display: block;
    width: 6px;
    height: 6px;
    background: #3e61a9;
    border-radius: 50%;
    position: absolute;
    left: 10px;
    top: 15px;
  }
}
.el-select {
  width: 100%;
}
</style>
